<template>
	<view class="flex justify-between mb-30">
		<view class="bg-no-repeat bg-bottom border-solid bg-gradient-to-b rounded-lg w-[32%] py-20"
			:class="[classList[i].border,classList[i].boxBg]" v-for="e,i in rankingList" :key="i" @click="onPath(e)">
			<view class="flex justify-center">
				<text class="font-bold text-sm">{{e.title}}</text>
			</view>
			<view class="flex w-full">
				<view class="flex-1 flex flex-col items-center"
					:style="{margin:`0rpx ${ea.ranking==1?'-50rpx':''}`,marginTop:`${ea.ranking==1?0:20}rpx`,zIndex:ea.ranking==1&&'1'}"
					v-for="ea,ia in e.list" :key="ia">
					<ImageBoxVue :src="`/static/live/${ea.ranking}.png`" width="45rpx" height="36rpx">
					</ImageBoxVue>
					<view class="w-[60rpx] h-[60rpx] rounded-full overflow-hidden border-solid border-2"
						style="margin-top: -8px;" :class="[classList[ea.ranking-1].border]">
						<ImageBoxVue :src="ea.headimg"></ImageBoxVue>
					</view>
					<view :class="['w-100 py-4 px-10 rounded mt-8 bg-gradient-to-r text-white font-bold ellipsis',classList[ea.ranking-1].bg]">
						{{ea.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import liveApi from '@/apis/apiList/liveApi';
	const classList = [
		{
			border: "border-[#61AAFF]",
			bg: "from-[#61AAFF] to-[#B9D7FF]",
			boxBg: "from-[#B9D7FF] to-[#fff]"
		}, {
			border: "border-[#FF975D]",
			bg: "from-[#FF993C] to-[#FFD6A6]",
			boxBg: "from-[#FFD6A6] to-[#fff]"
		}, {
			border: "border-[#FF6B6B]",
			bg: "from-[#FF5D5D] to-[#FFCCCC]",
			boxBg: "from-[#FFCCCC] to-[#fff]"
		},
	]
	const rankingList = ref([
		{
			title: "热度榜",
			key: "0",
			list: [{
				ranking: 2,
				headImg: null,
				name: "张二"
			}, {
				ranking: 1,
				headImg: null,
				name: "张一"
			}, {
				ranking: 3,
				headImg: null,
				name: "张三"
			}]
		}, {
			title: "问答榜",
			key: "1",
			list: [{
				ranking: 2,
				headImg: null,
				name: "张二"
			}, {
				ranking: 1,
				headImg: null,
				name: "张一"
			}, {
				ranking: 3,
				headImg: null,
				name: "张三"
			}]
		}, {
			title: "实力榜",
			key: "2",
			list: [{
				ranking: 2,
				headImg: null,
				name: "张二"
			}, {
				ranking: 1,
				headImg: null,
				name: "张一"
			}, {
				ranking: 3,
				headImg: null,
				name: "张三"
			}]
		},
	])
	onMounted(() => {
		getAllList()
	})
	const getAllList = () => {
		Promise.all([getItemList(0), getItemList(1), getItemList(2)]).then((res) => {
			rankingList.value[0].list = res[0].data
			rankingList.value[1].list = res[1].data
			rankingList.value[2].list = res[2].data
		})
	}
	const getItemList = (examine) => {
		const opt = {
			examine: examine,
			page: 1,
			limit: 3
		}
		return new Promise((resolve, reject) => {
			liveApi.getTheChartslist(opt).then(res => {
				res.data.map((item, idx) => {
					item.ranking = idx + 1
				})
				const data = [...res.data]
				const obj = {...res.data[1]}
				res.data.splice(1, 1)
				res.data.unshift(obj)
				resolve(res)
			})
		})
	}
	const onPath = (e) => {
		uni.navigateTo({
			url: `/pages/live/rankingList?key=${e.key}`
		})
	}
</script>

<style>
</style>